<template>
  <div class="row user-select-none" style="cursor: pointer;">
        <nav class="col-4" aria-label="Page navigation example">
            <ul v-if="page" class="pagination">
                <li class="page-item" :class="{disabled: page.index == 1}">
                    <a class="page-link"
                        @click="loadItems(page.index - 1)"
                        aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <li class="page-item" v-for="index in range" :key="index" :class="{disabled: index==page.index}">
                    <a class="page-link" @click="loadItems(index)"> {{index}}</a>
                </li>
                <li class="page-item" :class="{disabled: page.index == page.pages}">
                    <a class="page-link"
                        @click="loadItems(page.index + 1)"
                        aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
                <li class="page-item ">
                    <input @keyup.enter="loadItems($event.currentTarget.value)" class="page-link" style="width:50px">
                </li>
                <li class="page-item disabled">
                    <input class="page-link text-center" style="width:70px" :value="page.index + '/' + page.pages">
                </li>
                <li class="page-item disabled">
                    <input class="page-link text-center" style="width:70px" value="每页: ">
                </li>
                <li class="page-item">
                    <input class="page-link text-center" style="width: 80px;" type="number" min="1" max="100" v-model="pagesize">
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
export default {
    data() {
            return {
                // page: {'total': 0, 'pages': 1, 'index': 1, 'size': 12},
                pagesize: 1,
            }
        },
    props: ['page'],
    emits: ['loadItems'],
    methods: {
        loadItems(index) {
            this.$emit('loadItems', index)
        }
    },
    watch: {
        pagesize(newVal, oldVal) {
            if (this.page){
                this.page.size = this.pagesize
            }
            // localStorage.setItem('user.page', JSON.stringify(this.page))
        },
    },
    computed: {
        pageSize() {
            return this.page ? this.page.size : 0
        },
        range() {
            if (!this.page) return []
            let range = []
            if (this.page.pages <= 5) {
                for (let i = 1; i <= this.page.pages; ++i) {
                    range.push(i)
                }
            } else {
                if (this.page.index <= 3) {
                    for (let i = 1; i <= 5; ++i) {
                        range.push(i)
                    }
                }
                if (this.page.index > 3 && this.page.index < this.page.pages - 2) {
                    for (let i = this.page.index - 2; i <= this.page.index + 2; ++i) {
                        range.push(i)
                    }
                }
                if (this.page.index >= this.page.pages - 2) {
                    for (let i = this.page.pages - 4; i <= this.page.pages; ++i) {
                        range.push(i)
                    }
                }
            }
            if (range.length === 0) range = [1]
            return range
        }
    }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
